<template>
  <div>
    <suspense>
      <!-- 请求成功之后加载默认插槽的内容 -->
      <template #default>
        <HelloWorld @change-father="getNewFather" :father-name="father" v-model:fname="father" mother="rose">
          <template #logo>
            <h1>父组件传递的模版</h1>
          </template>
          <h3>默认的</h3>
        </HelloWorld>
      </template>
      <!-- 正在请求中就加载fallback插槽中的内容 -->
      <template #fallback>
        <div>
          正在加载。。。。。。
        </div>
      </template>
    </suspense>

  </div>
</template>

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import { ref, provide } from 'vue'
const father = ref('老王')

const getNewFather = (v: string) => {
  console.log('监听到了事件', v)
  father.value = v
}

provide('data', 123)
</script>

<style scoped>
</style>
